<template>
    <div>
        <div class="autograph" v-show="screenWidth >980">
            <div id="container" class="bianqian1">
                <span v-for="(item,index) in listTitle" id="index" :key="index" @click="choose(item)"> {{ item.name }}</span>
            </div>
        </div>
        <div class="top"  v-show="screenWidth<980">
            <van-icon name="wap-nav" @click="open=true" size="40" />
        <van-search v-model="value"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @cancel="onCancel"
                    style="margin-top:-8px;margin-right:-9px"
                    show-action
                    />

        </div>
            <div >
                <van-popup
                v-model="open"
                position="left"
                :style="{ height: '100%', width:'20%',backgroundColor: 'rgb(44,62,80)' }"
        >
            <p v-for="(item,index) in listTitle" id="index" :key="index" @click="choose(item)" class="listName"> {{item.name}}</p>

        </van-popup>
    </div>

    </div>
</template>
<script>
import { IndexBar, IndexAnchor, Popup, Icon, search, Cell } from 'vant';
import eventBus from '@/eventBus.js'
import { cateList, fetchList } from 'api/article'
import { mapMutations } from 'vuex'

export default {
    name: 'Heager',
    components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [search.name]: search,
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Cell.name]: Cell,
                },
    data() {
        return {
        open: false,
        screenWidth: '',
        screenHeight: '',
        value: '',
        listTitle: [{ index: 0, name: '首页', path: '/home' }, { index: 1, name: '我的文章', path: '/article' }, { index: 2, name: '讨论', path: '/idea' }, { index: 3, name: '文章分类', path: '/about' }, { index: 4, name: '新增文章', path: '/log' }, { index: 5, name: '登录', path: '/login' }]

        }
    },
        mounted() {
            this.screenWidth = document.body.clientWidth;
            this.screenHeight = document.body.clientHeight;
            window.onresize = () => {
        return (() => {
            this.screenWidth = document.body.clientWidth;
            this.screenHeight = document.body.clientHeight;
        })();
        };
    },
    methods: {
        ...mapMutations({
        onePlus: 'test/onePlus',
        logout: 'user/LOGOUT'
    }),
        choose(item) {
            var id = item.index;
            this.$router.push(item.path);
            if (id === 5) {
                this.logout()
            }
            this.open = false;
            this.breadValue = item.name;

            var spanArr = document.getElementById('container').getElementsByTagName('span');
            for (var i = 0; i <= 5; i++) {
                if (id === i) {
                spanArr[id].style.backgroundColor = 'rgb(213, 100, 100)';
                } else {
                spanArr[i].style.backgroundColor = '#424242';
                }
            }
        },
        async  onSearch() {
        if (this.value) {
            const data = await cateList(this.value);
            // console.log(data);
            eventBus.$emit('list', data)
        } else {
            const data = await fetchList();
            // console.log(data);
            eventBus.$emit('list', data)
        }
        },
        async onCancel() {
            this.value = ''
            const data = await fetchList();
            // console.log(data);
            eventBus.$emit('list', data)
        }
    }
}
</script>
<style lang="scss" scoped>
.autograph{
        width: 100%;
        height: 40px;
        font-size: 12px;
        background-color:#424242;
        color: #fff;
        display: flex;
        justify-content: center;
        .saying{
            margin-top: -10px;
            .p2{
                margin-top: -5px;
                margin-left: 20px;
            }
        }

        .bianqian1{
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            display: flex;
            width: 66%;
            justify-content: space-around;
            span{
            width:80px ;
            display: block;
            height: 40px;
        }
    }
}
.top{
    display: flex;
    justify-content: space-between ;
    width: 100%;
    height: auto;

};
.listName{
    display:flex;
    color: #fff;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

</style>
